<template>
  <div class="user-container main">

    <div class="question-card">
      <div class="header">
        <span class="dot"></span>
        <span class="title">酒店基本信息</span>
      </div>
      <div class="form-content">
        <van-form @submit="submit">
          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>酒店所在大厦总楼层数（含地下室）</span>
            </div>
            <van-field
              v-model="username"
              class="input-wrapper"
              name="勘察人姓名"
              placeholder="请填写"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </div>
          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>机器人需要服务的楼层</span>
            </div>
            <div class="tip-wrapper">请列出每栋楼楼层，例如：A栋1楼、5~13楼，B栋1楼、2~10楼</div>
            <van-field
              v-model="phone"
              class="input-wrapper"
              name="勘察人电话"
              placeholder="请填写"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </div>
          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>客房总数</span>
            </div>
            <van-field
              v-model="phone"
              class="input-wrapper"
              name="勘察人电话"
              placeholder="请填写"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </div>

          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>楼层走廊的地面材质</span>
            </div>
            <van-field name="radio">
              <template #input>
                <van-radio-group v-model="radioA" @change="changeRadio">
                  <van-radio name="1" class="radio-wrapper">地砖</van-radio>
                  <van-radio name="2" class="radio-wrapper">地毯</van-radio>
                  <van-radio name="3" class="radio-wrapper">其他</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </div>

          <div v-show="isShow" class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>楼层走廊的地面材质备注说明</span>
            </div>
            <van-field
              v-model="phone"
              class="input-wrapper"
              name="勘察人电话"
              placeholder="请填写"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </div>

          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>楼层走廊照片（1-3张照片）</span>
            </div>
            <div class="pic-group">
              <div class="example-pic-tip">参考示例</div>
              <img src="//img.hi-walle.com/example/ps107-1.png" class="example-pic" />
            </div>
            <van-uploader v-model="absoluteImage" accept="image/*" :after-read="afterRead" multiple :max-count="3" :max-size="5120 * 1024" @oversize="onOversize" />
          </div>

          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>机器人行走路径中是否有超过2CM坎</span>
            </div>
            <van-field name="radio">
              <template #input>
                <van-radio-group v-model="radio">
                  <van-radio name="0" class="radio-wrapper">是</van-radio>
                  <van-radio name="1" class="radio-wrapper">否</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </div>

          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>可开关门体楼层说明</span>
            </div>
            <van-field
              v-model="phone"
              class="input-wrapper"
              name="勘察人电话"
              placeholder="请填写"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </div>

          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>门体照片</span>
            </div>
            <div class="pic-group">
              <div class="example-pic-tip">参考示例</div>
              <img src="//img.hi-walle.com/example/ps107-1.png" class="example-pic" />
            </div>
            <van-uploader v-model="absoluteImage" accept="image/*" :after-read="afterRead" multiple :max-count="3" :max-size="5120 * 1024" @oversize="onOversize" />
          </div>

          <div class="form-item-wrapper">
            <div class="label-wrapper">
              <img src="" alt="required-icon" class="required-icon" />
              <span>危险区域描述</span>
            </div>
            <van-field name="checkboxGroup" class="custom-field">
              <template #input>
                <van-checkbox-group v-model="checkboxGroup">
                  <van-checkbox class="radio-wrapper" name="1" shape="square"> 机器人行走路径中有台阶，会有掉落风险 </van-checkbox>
                  <van-checkbox class="radio-wrapper" name="2" shape="square"> 机器人行走路径中有8度以上的坡度 </van-checkbox>
                  <van-checkbox class="radio-wrapper" name="3" shape="square">  机器人行走路径中有反光物品  </van-checkbox>
                  <van-checkbox class="radio-wrapper" name="4" shape="square">  机器人行走区域有易碎物品  </van-checkbox>
                  <van-checkbox class="radio-wrapper" name="5" shape="square"> 其他 </van-checkbox>
                  <van-checkbox class="radio-wrapper" name="6" shape="square"> 无 </van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
          </div>

        </van-form>
      </div>
    </div><!-- .question-card end -->
    <div class="footer-bar">
      <van-button :loading="loading" size="large" round type="info" loading-text="保存中..." @click="submit">保存</van-button>
    </div>
  </div><!-- .main end -->
</template>
<script>
import { today, getWeek } from '@/utils/helpers'
import { Notify, Dialog } from 'vant'

export default {
  layout: 'blank',
  async asyncData({ app }) {
  },
  data() {
    return {
      loading: false,
      username: '',
      phone: '',
      radio: '1',
      radioA: '1',
      absoluteImage: [],
      questionImage: [],
      checkbox: false,
      checkboxGroup: [],
      isShow: false,
      dailys: {},
      listQuery: {
        page: 1,
        limit: 20
      },
      date: today(),
      day: getWeek()
    }
  },
  computed: {
    rightform_phoneNumber() {
      return /^1\d{10}$/gi.test(this.phone)
    }
  },
  methods: {
    submit(e) {
      console.log('submit', e)
      this.loading = true
      if (!this.username) {
        Notify('请填写勘察人姓名')
        // this.$toast.fail('请填写手机号码')
        this.loading = false
        return
      } else if (!this.rightform_phoneNumber) {
        // this.$toast.fail('勘察人手机号码不正确')
        const _this = this
        _this.loading = true
        Dialog.confirm({ title: '提示', message: '请填写正确的勘察人电话，返回首页后已填数据将清空' }).then(() => {
          _this.$cookies.set('redirectUrl', this.$route.path)
          _this.$router.push({ path: '/' })
        }).catch(() => {})
        _this.loading = false
        return
      }
      Notify('勘查已完成不可编辑')
      this.loading = false
    },
    onOversize(file) {
      console.log(file)
      this.$toast('文件大小不能超过5M')
    },
    afterRead(file) {
      // console.log(file.file)
      var e = this.absoluteImage || []
      // 此时可以自行将文件上传至服务器
      if (e.length >= 3) {
        this.$toast('最多可上传3张图片')
      } else {
        const formData = new FormData()
        formData.append('upload_file', file.file)
        this.uploadCDN(formData)
      }
    },
    uploadCDN(formData) {
      console.log(formData)
    },
    changeRadioThree(e) {
      console.log(e)
    },
    changeRadio($event) {
      if ($event === '3') {
        this.isShow = true
      } else {
        this.isShow = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.user-container{
  box-sizing: border-box;
  padding: 3.2vw;
  .question-card {
    box-sizing: border-box;
    width: 93.6vw;
    padding: 5.33333vw 5.33333vw 1.6vw;
    margin-bottom: 17.06667vw;
    background: #fff;
    border-radius: 3.73333vw;
    .header {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .dot {
        display: block;
        width: 2.66667vw;
        height: 2.66667vw;
        margin-right: 1.6vw;
        background: #0075ff;
        border-radius: .53333vw;
      }
      .title {
        font-size: 4.26667vw;
        font-weight: 600;
        color: #0075ff;
      }

    }
    .form-item-wrapper {
      padding: 4.26667vw 0 2.66667vw;
      position: relative;
      .custom-field {
        padding: 0;
      }
      .label-wrapper {
        margin-bottom: 2.13333vw;
        font-size: 4.26667vw;
        font-weight: 500;
        color: #182a41;
        line-height: 5.86667vw;
      }
      .input-wrapper {
        box-sizing: border-box;
        width: 82.93333vw;
        height: 11.73333vw;
        padding: 2.8vw 3.2vw;
        border-radius: 1.6vw;
        border: 1px solid #dfe3eb;
      }
      .required-icon {
        width: 2.13333vw;
        height: 2.13333vw;
        position: absolute;
        left: -2.93333vw;
        top: 5.86667vw;
      }
      .tip-wrapper {
        margin-bottom: 2.13333vw;
        font-size: 3.46667vw;
        font-weight: 400;
        color: #798398;
        line-height: 4.8vw;
      }
      .radio-wrapper {
        margin-bottom: 3.73333vw;
      }
      .pic-group {
        position: relative;
        margin: 1.6vw 0 1.6vw -1.6vw;
        .example-pic-tip {
          width: 18.66667vw;
          height: 5.33333vw;
          background: rgba(51,51,51,.8);
          border-radius: 0 0 2.13333vw 2.13333vw;
          opacity: .28;
          position: absolute;
          bottom: 3.2vw;
          left: 1.6vw;
          font-size: 3.2vw;
          line-height: 4.53333vw;
          font-weight: 400;
          color: #fff;
          text-align: center;
        }
        .example-pic {
          width: 18.66667vw;
          height: 18.66667vw;
          background: #f6f7fc;
          border-radius: 2.13333vw;
          margin-left: 1.6vw;
          margin-bottom: 1.6vw;
        }
      }

    }
  }
  .footer-bar {
    position: fixed;
    width: 93.6vw;
    height: 17.06667vw;
    bottom: 0;
  }
}
</style>
